<template>
   <el-main class="task-form-container">
    <h2>发布任务</h2>
    <el-form class="task-form">
      <el-form-item label="任务标题：" class="form-item">
        <el-input v-model="task.title"></el-input>
      </el-form-item>
      <el-form-item label="任务描述：" class="form-item">
        <el-input type="textarea" v-model="task.description"></el-input>
      </el-form-item>
      <el-form-item label="未完成互评的同学得分变更百分比：" class="form-item">
        <el-input type="number" v-model="task.nograde" :min="0" :max="100" placeholder="输入0-100的数"></el-input>
      </el-form-item>
      <el-form-item label="每人互评作业份数：" class="form-item">
        <el-select v-model="task.num" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="截止时间：" class="form-item">
        <el-date-picker
          v-model="deadline"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="form-item buttons">
        <el-button type="primary" @click="submitTask">提交</el-button>
        <el-button @click="closeRelease">取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>
  

<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus';
import moment from 'moment';
import { ref,computed,defineEmits } from 'vue'

const emits = defineEmits(['closeRelease'])
let deadline = ref()
let task = ref({
    title : '',
    tid:'1',
    description:'',
    nograde:'',
    num:'',
    deadline:null
})

const submitTask = (() =>{
   
    console.log(deadline.value)
    if(task.value.num==''||task.value.title==''||task.value.nograde==''
        ||deadline.value==''){
          ElMessage({
            message:'输入数据存在错误,请重新输入',
            type:'error'
          })
        }
    else{
        task.value.deadline = moment(deadline.value).format('YYYY-MM-DDTHH:mm:ss')
        axios.post('http://localhost:8080/gradetask/releasegradetask',task.value)
        .then((res) => {
            if(res.data){
              ElMessage({
                message:'发布成功',
                type:'success'
              })
            }
            setTimeout(() => {
              emits("closed")
            },500)
            
        })
        .catch((err) => {
            console.log(err);
            ElMessage({
              message:'操作失败',
              type:'error'
            })
        })
    } 
})

const closeRelease = (() => {
    emits("closed")
})



</script>

<style scoped>
    .task-form-container {
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      max-width: 600px;
      margin: 0 auto;
    }

    h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .task-form {
      display: flex;
      flex-direction: column;
    }

    .form-item {
      margin-bottom: 20px;
    }

    .form-item .el-form-item__content {
      display: flex;
      align-items: center;
    }

    .form-item .el-input,
    .form-item .el-select,
    .form-item .el-date-picker {
      width: 100%;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
    }

    .buttons .el-button {
      flex-grow: 1;
      margin-right: 10px;
    }

    .buttons .el-button:last-child {
      margin-right: 0;
    }
</style>

